<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML实验页面</title>
    <style>
        /* 简单美化样式，使页面更易读 */
        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            padding: 5px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }
        blockquote {
            border-left: 4px solid #ccc;
            padding-left: 15px;
            margin-left: 0;
            color: #666;
        }
    </style>
</head>
<body id="top">
    <!-- 页面标题 -->
    <h1>欢迎来到我的HTML实验页面</h1>
    
    <!-- 文本格式化部分 -->
    <h2>1. 文本格式化</h2>
    <p>这是一个普通的段落（&lt;p&gt;）。HTML允许我们使用标签来<strong>加粗强调</strong>或使用<em>斜体表示轻微强调</em>。</p>
    
    <p>我们还可以<mark>高亮标记文本</mark>，插入<sup>上标</sup>和<sub>下标</sub>，或者给文本添加<ins>下划线（插入）</ins>和<del>删除线（删除）</del>。</p>
    
    <p>代码示例: <code>console.log("Hello, World!");</code></p>
    
    <blockquote>这是一个引用块（&lt;blockquote&gt;），常用于引用他人的话或段落。</blockquote>
    
    <pre>预格式化文本（&lt;pre&gt;）保留空格和换行。</pre>
    
    <hr> 

    <!-- 图片与超链接部分 -->
    <h2>2. 图片与超链接</h2>
    <p>图片使用 &lt;img&gt; 标签嵌入。它是自闭合标签。</p>
    <!-- 使用占位图服务确保图片能正常显示 -->
    <img src="https://picsum.photos/800/400" alt="风景示例图片，展示山脉和湖泊" width="400" title="示例风景图片">

    <p>超链接使用 &lt;a&gt; 标签。</p>
    <p>访问 <a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN Web Docs</a> 学习更多Web技术（target="_blank"会在新标签页打开）。</p>
    <p><a href="#top">跳回页面顶部</a>（通过ID锚点）。</p>
</body>
</html>
    